<template>
  <div>
    <Tooltip v-if="nameList.length > 0 && nameObj[localeLanguage]" placement="bottom">
      <template #title>
        <div v-for="(item, index) of nameList" :key="index">
          <div
            ><span>{{ countryName[item] }}：</span><span>{{ nameObj[item] }}</span></div
          >
        </div>
      </template>
      <div class="primary-color single-line-ellipsis">{{ setName(nameObj, localeLanguage) }}</div>
    </Tooltip>
    <div v-else>-</div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, toRefs } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { useLocaleStoreWithOut } from '/@/store/modules/locale';

  interface Props {
    nameObj: Object;
  }
  const props = defineProps<Props>();

  const countryName = {
    cn: '中国',
    en: '英国',
    vn: '越南',
    th: '泰国',
    br: '巴西',
    in: '印度',
  };

  const transferKey = {
    zh_CN: 'cn',
    en_US: 'en',
    vi_VN: 'vn',
    th_TH: 'th',
    hi_IN: 'in',
    pt_BR: 'br',
  };
  const { nameObj } = toRefs(props);
  const localeStore = useLocaleStoreWithOut();

  const localeLanguage = computed(() => {
    return transferKey[localeStore.localInfo.locale];
  });

  const nameList = Object.keys(countryName).filter((item) => nameObj.value[item]);
  // const nameList = Object.keys(nameObj.value).map((item) => {
  //   return {
  //     key: countryName[item],
  //     value: nameObj.value[item],
  //   };
  // });

  function setName(name, locale) {
    return name[locale];
  }
</script>
